<template>
	<section class="activity">
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters" ref="filters">
				<el-form-item label="创建时间">
					<el-date-picker v-model="filters.startTime" type="datetime" :picker-options="pickerBeginDateBefore" placeholder="开始时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="至">
					<el-date-picker v-model="filters.endTime" type="datetime" :picker-options="pickerBeginDateAfter" placeholder="结束时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="活动类型">
					<el-select v-model="filters.type" placeholder="请选择" clearable>
						<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="活动状态">
					<el-select v-model="filters.status" placeholder="请选择" clearable>
						<el-option v-for="item in activityType" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.title" placeholder="请输入活动主题关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getActivityList">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增活动</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-table style="width: 100%" :data="activitys" highlight-current-row v-loading="listLoading" @selection-change="selsChange" border>
			<el-table-column type="index" align="center" width="70" label="编号" fixed="left"></el-table-column>
			<el-input prop="id" type="hidden"></el-input>
			<el-input prop="introduce" type="hidden"></el-input>
			<el-table-column prop="id" label="活动ID" min-width="100" align="center"></el-table-column>
			<el-table-column label="活动主题" min-width="300" align="center">
				<template slot-scope="scope">
					<el-popover trigger="hover" placement="top" style="background-color:#000;">
						<p style="width: 280px;line-height: 1.5;font-size: 16px;">{{ scope.row.title }}</p>
						<div slot="reference" class="name-wrapper">
							<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.title }}</p>
						</div>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="类型" min-width="100" :formatter="formatType" align="center"></el-table-column>
			<el-table-column prop="coverImage" label="图片" min-width="100" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.coverImage" width="60" height="40" align="center" />
				</template>
			</el-table-column>
			<el-table-column prop="isRecommend" label="推荐首页" min-width="100" align="center" :formatter="formatRecommend"></el-table-column>
			<el-table-column prop="startTime" label="开始时间" align="center" width="180" :formatter="formatDateTime"></el-table-column>
			<el-table-column prop="endTime" label="结束时间" align="center" min-width="180" :formatter="formatDateTime"></el-table-column>
			<el-table-column prop="addrDetail" label="地点" min-width="300" align="center"></el-table-column>
			<el-table-column prop="restrictNum" label="人数" min-width="70"></el-table-column>
			<el-table-column prop="price" label="价格" min-width="70" align="center"></el-table-column>
			<el-table-column prop="status" label="状态" min-width="120" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.status == 1">未开始</span>
					<span v-if="scope.row.status == 2">正在进行中</span>
					<span v-if="scope.row.status == 3">已结束</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="180" align="center" :formatter="formatDateTime"></el-table-column>
			<el-table-column label="操作" min-width="200" fixed="right" align="center">
				<template slot-scope="scope">
					<el-button size="small" @click="handleSee(scope.$index, scope.row)">查看</el-button>
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination
				class="top"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 15, 20, 30]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--新增界面-->
		<el-dialog title="新增活动" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
				<el-form-item label="活动主题" prop="title">
					<el-input v-model="addForm.title" auto-complete="off"></el-input>
				</el-form-item>
				<div style="display: flex;justify-content: flex-start">
					<el-form-item label="活动分类" prop="classify" clearable>
						<el-select v-model="addForm.classify" placeholder="请选择" clearable>
							<el-option v-for="item in classifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="活动类型" prop="type">
						<el-select v-model="addForm.type" placeholder="请选择" clearable>
							<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="活动图片">
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType2"
					           :on-success="onSuccess"
					           :on-error="onError"
					           multiple
					           :limit="1"
					           list-type="picture-card"
					           :on-exceed="handleExceed"
					           :file-list="fileList2"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="推荐到首页">
					<el-radio-group v-model="addForm.isRecommend">
						<el-radio class="radio" :label="1">是</el-radio>
						<el-radio class="radio" :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="活动地点" prop="addrDetail">
					<el-input v-model="addForm.addrDetail"></el-input>
				</el-form-item>
				<el-form-item label="活动内容" prop="introduce">
					<UE ref="ueAdd"></UE>
				</el-form-item>
				<el-form-item label="人数" prop="restrictNum">
					<el-input v-model="addForm.restrictNum" type="number"></el-input>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="addForm.price" type="number"></el-input>
				</el-form-item>
				<el-form-item label="开始时间" prop="startTime">
					<el-date-picker type="datetime" :picker-options="pickerBeginDateBefore1" placeholder="选择日期" v-model="addForm.startTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" prop="endTime">
					<el-date-picker type="datetime" :picker-options="pickerBeginDateAfter1" placeholder="选择日期" v-model="addForm.endTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="开启分销提成">
					<el-radio-group v-model="addForm.distributeType">
						<el-radio class="radio" :label="0">是</el-radio>
						<el-radio class="radio" :label="1">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="分销比例设置" v-if="addForm.distributeType == '0'">
					一级：<el-input type="number" v-model="addForm.distributeValueOne" style="width: 300px;"></el-input><span style="margin-right: 20px;">%</span>
					二级：<el-input type="number" v-model="addForm.distributeValueTwo" style="width: 300px;"></el-input>%
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit('addForm')" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
		
		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false" @close="editorClose">
			<el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
				<el-input v-model="editForm.id" type="hidden"></el-input>
				<el-form-item label="活动主题" prop="title">
					<el-input v-model="editForm.title"></el-input>
				</el-form-item>
				<div style="display: flex;justify-content: flex-start">
					<el-form-item label="活动分类" prop="categoryId" clearable>
						<el-select v-model="editForm.categoryId" placeholder="请选择" clearable>
							<el-option v-for="item in classifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="活动类型" prop="type">
						<el-select v-model="editForm.type" placeholder="请选择" clearable>
							<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="活动图片">
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType2"
					           :on-success="onSuccessUpdate"
					           :on-error="onErrorUpdate"
					           multiple
					           :limit="1"
					           list-type="picture-card"
					           :on-exceed="handleExceed"
					           :file-list="fileList2"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="图片预览:">
					<el-card :body-style="{ padding: '0px' }">
						<img :src="editForm.coverImage" width="100%" height="100%" class="image">
					</el-card>
				</el-form-item>
				<el-form-item label="推荐到首页">
					<el-radio-group v-model="editForm.isRecommend">
						<el-radio class="radio" :label="1">是</el-radio>
						<el-radio class="radio" :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="活动地点" prop="addrDetail">
					<el-input v-model="editForm.addrDetail"></el-input>
				</el-form-item>
				<el-form-item label="活动内容" prop="introduce" v-if="isShow">
					<UE ref="ueModify" :id="ueModifyContent" :defaultMsg="modifyContentUe"></UE>
				</el-form-item>
				<el-form-item label="人数" prop="restrictNum">
					<el-input v-model="editForm.restrictNum" type="number"></el-input>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="editForm.price" type="number"></el-input>
				</el-form-item>
				<el-form-item label="开始时间">
					<el-date-picker type="datetime" :picker-options="pickerBeginDateBefore2" placeholder="选择日期" v-model="editForm.startTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker type="datetime" :picker-options="pickerBeginDateAfter2" placeholder="选择日期" v-model="editForm.endTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="开启分销提成">
					<el-radio-group v-model="editForm.distributeType">
						<el-radio class="radio" :label="0">是</el-radio>
						<el-radio class="radio" :label="1">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="分销比例设置" v-if="editForm.distributeType == '0'">
					一级：<el-input type="number" v-model="editForm.distributeValueOne" style="width: 300px;"></el-input><span style="margin-right: 20px;">%</span>
					二级：<el-input type="number" v-model="editForm.distributeValueTwo" style="width: 300px;"></el-input>%
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
		
		<!--查看界面-->
		<el-dialog title="查看" v-model="seeFormVisible" :close-on-click-modal="false" @close="editorSClose">
			<div>
				<el-form :model="seeForm" label-width="100px" ref="seeForm">
					<el-form-item label="活动主题">
						<el-input v-model="seeForm.title" :readonly="true"></el-input>
					</el-form-item>
					<div style="display: flex;justify-content: flex-start">
						<el-form-item label="活动分类" prop="categoryId">
							<el-select disabled v-model="seeForm.categoryId" placeholder="请选择">
								<el-option v-for="item in classifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="活动类型" prop="type">
							<el-select disabled v-model="seeForm.type" placeholder="请选择" clearable>
								<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</div>
					<el-form-item label="活动图片">
						<el-card :body-style="{ padding: '0px' }">
							<img :src="seeForm.coverImage" width="100%" height="100%" class="image">
						</el-card>
					</el-form-item>
					<el-form-item label="推荐到首页">
						<el-radio-group v-model="seeForm.isRecommend">
							<el-radio class="radio" :label="1">是</el-radio>
							<el-radio class="radio" :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="活动地点">
						<el-input v-model="seeForm.addrDetail" :readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="活动内容" prop="introduce" v-if="isSShow">
						<UE ref="ueSee" :id="ueSeeContent" :defaultMsg="seeContentUe"></UE>
					</el-form-item>
					<el-form-item label="人数">
						<el-input v-model="seeForm.restrictNum" :readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="价格">
						<el-input v-model="seeForm.price" :readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="总费用">
						<el-input v-model="seeForm.allPrice" :readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="开始时间">
						<el-date-picker type="datetime" placeholder="选择日期" v-model="seeForm.startTime" :readonly="true"></el-date-picker>
					</el-form-item>
					<el-form-item label="结束时间">
						<el-date-picker type="datetime" placeholder="选择日期" v-model="seeForm.endTime" :readonly="true"></el-date-picker>
					</el-form-item>
					<div>
						<el-form-item label="开启分销提成">
							<el-radio-group v-model="seeForm.distributeType">
								<el-radio class="radio" :label="0">是</el-radio>
								<el-radio class="radio" :label="1">否</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="分销比例设置" v-if="seeForm.distributeType == '0'">
							一级：<el-input type="number" v-model="seeForm.distributeValueOne" style="width: 300px;"></el-input><span style="margin-right: 20px;">%</span>
							二级：<el-input type="number" v-model="seeForm.distributeValueTwo" style="width: 300px;"></el-input><span style="margin-right: 20px;">%</span>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<el-table :data="activityEnroll">
				<el-table-column type="index" width="80" label="编号"></el-table-column>
				<el-table-column prop="userId" label="报名人ID" width="120"></el-table-column>
				<el-table-column prop="userName" label="报名人昵称" width="120"></el-table-column>
				<el-table-column prop="amount" label="报名费（元）" width="120"></el-table-column>
				<el-table-column prop="userMobile" label="手机号" width="120"></el-table-column>
				<el-table-column prop="enrollTime" label="报名时间" min-width="120" :formatter="formatDateTime"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="danger" size="small" @click="refund(scope.$index, scope.row)">退款</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</section>
</template>

<script>
	import UE from '@/components/UE'
	import { activityList, addActivity, updateActivity, getActivity, deleteActivity, getActivityAndEnroll, getActivityAndEnrollMore, refund, getActivityClassify } from '@/api/api';
	
	export default {
		data() {
			return {
				//条件查询
				filters: {
					startTime: '',
					endTime: '',
					type: '',
					status: '',
					title: '',
					pageIndex: '',
					pageSize: ''
				},
				pickerBeginDateBefore:{
					disabledDate: (time) => {
						let beginDateVal = this.filters.endTime;
						if (beginDateVal) {
							return time.getTime() > beginDateVal;
						}
					}
				},
				pickerBeginDateAfter:{
					disabledDate: (time) => {
						let beginDateVal = this.filters.startTime;
						if (beginDateVal) {
							return time.getTime() < beginDateVal;
						}
					}
				},
				//分销设置
				disStringOne: {
					desc_name: '',
					desc_value: ''
				},
				//分销设置
				disStringTwo: {
					desc_name: '',
					desc_value: ''
				},
				//新增活动
				addForm: {
					title: '',
					type: '',
					classify: '',
					coverImage: '',
					isRecommend: '',
					addrDetail: '',
					introduce: '',
					restrictNum: '',
					price: '',
					startTime: '',
					endTime: '',
					distributeType: '',
					distributeString: '',
					distributeValueOne: '',
					distributeValueTwo: ''
				},
				//编辑界面数据
				editForm: {
					id: '',
					title: '',
					type: '',
					categoryId: '',
					coverImage: '',
					isRecommend: '',
					addrDetail: '',
					introduce: '',
					restrictNum: '',
					price: '',
					startTime: '',
					endTime: '',
					distributeType: '',
					distributeString: '',
					distributeValueOne: '',
					distributeValueTwo: ''
				},
				//查看界面数据
				checkId: '',//查看人
				seeForm: {
					id: '',
					title: '',
					type: '',
					categoryId: '',
					coverImage: '',
					isRecommend: '',
					addrDetail: '',
					introduce: '',
					restrictNum: '',
					price: '',
					allPrice: '',
					startTime: '',
					endTime: '',
					distributeType: '',
					distributeValueOne: '',
					distributeValueTwo: ''
				},
				//初始活动列表数据
				activitys: [],
				//初始化报名列表数据
				activityEnroll: [],
				total: 0,
				page: 1,
				pageSize : 10,
				currentPage: 1,
				listLoading: false,
				sels: [],//列表选中列
				isShow: false,
				isSShow: false,
				ueModifyContent: '',
				modifyContentUe: '',
				ueSeeContent: '',
				seeContentUe: '',
				
				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					classify: [
						{ required: true, message: '请选择类型', trigger: 'blur' }
					],
					type: [
						{ required: true, message: '请选择类型', trigger: 'blur' }
					],
					title: [
						{ required: true, message: '请输入活动主题', trigger: 'blur' }
					],
					addrDetail: [
						{ required: true, message: '请输入活动地点', trigger: 'blur' }
					],
					introduce: [
						{ required: true, message: '请输入活动内容', trigger: 'blur' }
					],
					restrictNum: [
						{ required: true, message: '请输入人数' }
					],
					price: [
						{ required: true, message: '请输入价格' }
					]
				},
				
				pickerBeginDateBefore1:{
					disabledDate: (time) => {
						let beginDateVal = this.addForm.endTime;
						if (beginDateVal) {
							return time.getTime() > beginDateVal;
						}
					}
				},
				pickerBeginDateAfter1:{
					disabledDate: (time) => {
						let beginDateVal = this.addForm.startTime;
						if (beginDateVal) {
							return time.getTime() < beginDateVal;
						}
					}
				},
				
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					categoryId: [
						{ required: true, message: '请选择类型', trigger: 'blur' }
					],
					type: [
						{ required: true, message: '请选择类型', trigger: 'blur' }
					],
					title: [
						{ required: true, message: '请输入活动主题', trigger: 'blur' }
					],
					addrDetail: [
						{ required: true, message: '请输入活动地点', trigger: 'blur' }
					],
					introduce: [
						{ required: true, message: '请输入活动内容', trigger: 'blur' }
					],
					restrictNum: [
						{ required: true, message: '请输入人数' }
					],
					price: [
						{ required: true, message: '请输入价格' }
					]
				},
				
				pickerBeginDateBefore2:{
					disabledDate: (time) => {
						let beginDateVal = this.editForm.endTime;
						if (beginDateVal) {
							return time.getTime() > beginDateVal;
						}
					}
				},
				pickerBeginDateAfter2:{
					disabledDate: (time) => {
						let beginDateVal = this.editForm.startTime;
						if (beginDateVal) {
							return time.getTime() < beginDateVal;
						}
					}
				},
				
				seeFormVisible: false,//查看界面是否显示
				seeLoading: false,
				// 活动分类数据
				classifyList: [
					{value: '1',label: '太极'},
					{value: '2',label: '太极'},
					{value: '3',label: '太极'}
				],
				//活动类型数据
				type: [{
					value: '1',
					label: '门店活动'
				}, {
					value: '2',
					label: '合作商家活动'
				}],
				//活动状态数据
				activityType: [{
					value: '1',
					label: '未开始'
				}, {
					value: '2',
					label: '正在进行中'
				}, {
					value: '3',
					label: '已结束'
				}],
				fileType1:{
					"fileType" : "SUMMARY_EVENT"
				},
				fileList: [],
				fileType2:{
					"fileType" : "SUMMARY_EVENT"
				},
				fileList2: []
			}
		},
		methods: {
			//富文本处理
			addContent() {
				return this.$refs.ueAdd.getUEContent();
			},
			modifyContent() {
				return this.$refs.ueModify.getUEContent();
			},
			editorClose() {
				this.editFormVisible = false; //隐藏表单
				setTimeout(() => { //定时
					this.isShow = false;  //隐藏富文本
				},500)
			},
			editorSClose() {
				this.seeFormVisible = false; //隐藏表单
				setTimeout(() => { //定时
					this.isSShow = false;  //隐藏富文本
				},500)
			},
			
			onSuccess(response, file, fileList) {
				this.addForm.coverImage = file.response.body;
			},
			
			onError(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},
			
			handleExceed(files, fileList) {
				this.$message.warning(`当前超出限制！本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			onSuccessUpdate(response, file, fileList) {
				this.editForm.coverImage = file.response.body;
			},
			onErrorUpdate(response, file, fileList){
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},
			//获取活动列表
			getActivityList() {
				this.$refs.filters.validate((valid)=>{
					if(valid){
						if(!this.filters.startTime || this.filters.startTime == ''){
							this.filters.startTime = null;
						}
						if(!this.filters.endTime || this.filters.endTime == ''){
							this.filters.endTime = null;
						}
						let para = {
							startTime: this.filters.startTime,
							endTime: this.filters.endTime,
							type: this.filters.type,
							status: this.filters.status,
							title: this.filters.title,
							pageIndex: this.page,
							pageSize: this.pageSize
						};
						
						this.listLoading = true;
						activityList(para).then((res) => {
							this.activitys = res.data.data;
							this.total = res.data.totalCount;
							this.listLoading = false;
						});
					}
				});
			},
			//类别显示转换
			formatType: function (row, column){
				return row.type == 1 ? '门店活动' : row.type == 2 ? '合作商家活动' : '未知'
			},
			//是否推荐首页转换
			formatRecommend: function (row, column){
				return row.isRecommend == 0 ? '否' : row.isRecommend == 1 ? '是' : '未知'
			},
			formatDateTime: function (row, column){
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			//每页显示数据量变更
			handleSizeChange: function(val) {
				this.pageSize = val;
				this.getActivityList();
			},
			//分页操作
			handleCurrentChange: function(val) {
				this.page = val;
				this.getActivityList();
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
					isRecommend: 0,
					distributeType: 1
				};
			},
			//新增
			addSubmit: function (formName) {
				this.addForm.introduce = this.addContent();
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							var distributeString = "";
							if(this.addForm.distributeType == 0){ //分销设置数据拼接
								distributeString += "[";
								distributeString += "{\"desc_name\":\"一级\",\"desc_value\":\"" + this.addForm.distributeValueOne.toString() + "\"}";
								distributeString += ",";
								distributeString += "{\"desc_name\":\"二级\",\"desc_value\":\"" + this.addForm.distributeValueTwo.toString() + "\"}";
								distributeString += "]";
							}
							let para = {
								title: this.addForm.title,
								type: this.addForm.type,
								categoryId: this.addForm.classify,
								coverImage: this.addForm.coverImage,
								isRecommend: this.addForm.isRecommend,
								addrDetail: this.addForm.addrDetail,
								introduce: this.addForm.introduce,
								restrictNum: this.addForm.restrictNum,
								price: this.addForm.price,
								startTime: this.addForm.startTime,
								endTime: this.addForm.endTime,
								distributeType: this.addForm.distributeType,
								distributionString: distributeString
							};
							
							addActivity(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getActivityList();
							});
						});
					}
				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.isShow = true;
				let para = {
					activityID: row.id
				};
				this.ueModifyContent = String(index);
				this.modifyContentUe = row.introduce;
				getActivity(para).then((res) => {
					this.editForm = Object.assign(res.data.data);
					this.classifyList.map(v => {
						if(v.id == res.data.data.categoryId) {
							this.editForm.categoryId = v.name
						}
					})
					if(row.type==1){
						return this.editForm.type = '门店活动';
					}
					if(row.type==2){
						return this.editForm.type = '合作商家活动';
					}
					
				});
			},
			//编辑
			editSubmit: function () {
				this.editForm.introduce = this.modifyContent();
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							var distributeString = "";
							if(this.editForm.distributeType == 0){ //分销设置数据拼接
								distributeString += "[";
								distributeString += "{\"desc_name\":\"一级\",\"desc_value\":\"" + this.editForm.distributeValueOne.toString() + "\"}";
								distributeString += ",";
								distributeString += "{\"desc_name\":\"二级\",\"desc_value\":\"" + this.editForm.distributeValueTwo.toString() + "\"}";
								distributeString += "]";
							};
							if(this.editForm.type == '门店活动'){
								this.editForm.type = 1;
							};
							if(this.editForm.type == '合作商家活动'){
								this.editForm.type = 2;
							};
							let para = {
								id: this.editForm.id,
								title: this.editForm.title,
								type: this.editForm.type,
								//categoryId: this.editForm.categoryId,
								coverImage: this.editForm.coverImage,
								isRecommend: this.editForm.isRecommend,
								addrDetail: this.editForm.addrDetail,
								introduce: this.editForm.introduce,
								restrictNum: this.editForm.restrictNum,
								price: this.editForm.price,
								startTime: this.editForm.startTime,
								endTime: this.editForm.endTime,
								distributeType: this.editForm.distributeType,
								distributionString: distributeString
							};
							this.classifyList.map(v => {
								if(v.name == this.editForm.categoryId) {
									this.editForm.categoryId = v.id
								}
							})
							para.categoryId = this.editForm.categoryId
							updateActivity(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getActivityList();
							});
						});
					}
				});
			},
			//显示查看界面
			handleSee: function (index, row) {
				this.checkId = row.id
				this.seeFormVisible = true;
				this.isSShow = true;
				let para = {
					activityID: row.id
				};
				this.ueSeeContent = String(index);
				this.seeContentUe = row.introduce;
				var sNum = row.restrictNum;
				var sPrice = row.price;
				getActivityAndEnroll(para).then((res) => {
					this.seeForm = res.data.data;
					this.classifyList.map(v => {
						if(v.id == this.seeForm.categoryId) {
							this.seeForm.categoryId = v.name
						}
					})
					if(row.type==1){
						return this.seeForm.type = '门店活动';
					}
					if(row.type==2){
						return this.seeForm.type = '合作商家活动';
					}
				});
				getActivityAndEnrollMore(para).then((res) => {
					this.activityEnroll = res.data.data;
					if(sNum == 0){
						this.seeForm.restrictNum = '不限人数';
					}else{
						var yNum = this.activityEnroll.length;
						this.seeForm.restrictNum = yNum+"/"+(sNum+yNum);
						this.seeForm.allPrice = yNum*sPrice;
					}
					if(sPrice == 0){
						this.seeForm.price = '免费';
					}
				});
			},
			refund(index,row) {
				this.$confirm('此操作将会退款, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 请求
					let para = {
						userId: row.userId,
						activityID: this.checkId
					}
					refund(para).then(res => {
						getActivityAndEnrollMore({ activityID: this.checkId }).then((res) => {
							this.activityEnroll = res.data.data;
						});
						this.$message({
							type: 'success',
							message: '退款成功!'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退款'
					});
				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						activityID: row.id
					};
					deleteActivity(para).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getActivityList();
					});
				}).catch(() => {
					//异常处理
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			/*
			* 活动分类获取
			* */
			getActivityClassify() {
				let para = {}
				getActivityClassify(para).then(res => {
					this.classifyList = res.data.data
					this.classifyList.map(v => {
						v.id = String(v.id)
					})
				})
			}
		},
		mounted() {
			this.getActivityList();
			this.getActivityClassify();
		},
		components: {
			UE
		}
	}

</script>

<style lang="scss">

</style>
